import React, { forwardRef, useImperativeHandle, useRef } from 'react'

/**
 * 我们不希望子组件暴露太多给父组件，让父随便修改，怎么办呢？
 *      使用ImperativeHandle，react整个设计就是这样的。
 * 接收三个参数
 *  1：对那个对象；
 *  2：返回一个对象；
 *  3：根据依赖变化，重新调用；
 */

const MyInput = forwardRef((props, ref) => {
  const inputCpnsRef = useRef();

  useImperativeHandle(ref, () => ({
    //返回这个对象会放在 ref对象里的current里，所以下面调用的实际上是我们定义的这个。
    focus: () => {
      console.log('focusfocus');
      //让子组件用属于自己的ref来进行操作
      inputCpnsRef.current.focus();
    }
  }))
  
  return <div>子：<input ref={inputCpnsRef} type="text" /></div>
})

export default function ImperativeHandleDemo() {
  const inputRef = useRef();
  
  return (
    <div>
      父：<button onClick={e => inputRef.current.focus()}>聚焦</button>
      <MyInput ref={inputRef}/>
    </div>
  )
}
